<template>
    <div class="h-full overflow-y-scroll p-8 flex flex-col">
        <div class="flex flex-row items-center justify-between">
            <editor-text
                class="text-3xl Serif-Bolder"
                @input="saveSnippet($event, 'title')"
                :value="value.title"
                :editable="editable"
                placeholder="请输入标题"
                type="text"
            >
            </editor-text>
            <div @click="deleteSnippet" class="green-btn">删除</div>
            <div @click="refreshSnippet" class="green-btn">刷新</div>
            <div @click="uploadSnippet" class="green-btn">保存</div>
        </div>
        <div class="flex items-center">
            <div class="cursor-default p-2 shadow rounded m-2">代码语言</div>
            <language-select
                @input="saveSnippet($event, 'language')"
                :value="value.language"
                :editable="editable"
            ></language-select>
            <div
                class="
                    flex flex-col flex-grow
                    cursor-default
                    p-2
                    shadow
                    rounded
                    m-2
                "
            >
                <div v-if="value._id">ID: {{ value._id }}</div>
            </div>
        </div>

        <div class="m-2">
            <div class="cursor-default py-2">标签</div>
            <tag-row
                class=""
                @input="saveSnippet($event, 'tags')"
                :value="Tags"
                :editable="editable"
                :closeable="true"
            ></tag-row>
        </div>
        <div>
            <div class="m-2">描述</div>
            <editor-text
                class="text-base Serif-Bolder"
                @input="saveSnippet($event, 'description')"
                :value="value.description"
                :editable="editable"
                placeholder="请输入描述"
            >
            </editor-text>
        </div>
        <div class="rounded shadow m-2 p-2 min-h-full overflow-hidden">
            <div class="m-2">代码</div>
            <monaco-editor
                v-if="editable"
                @input="saveSnippet($event, 'body')"
                :value="value.body"
                class="h-full w-full"
                :language="value.language"
            ></monaco-editor>
            <code-shower v-else :code="value.body"></code-shower>
        </div>
    </div>
</template>

<script>
import monacoEditor from "@konghayao/vue-monaco-editor/dist/monacoEditor.js";
import languageSelect from "./languageSelect.vue";
import editorText from "@/vant-plus/vanText.vue";
import tagRow from "@/vant-plus/tagRow.vue";
import codeShower from "./codeShower.vue";
import { mapActions } from "vuex";
import { Dialog } from "vant";

export default {
    props: {
        editable: {
            type: Boolean,
            default: true,
        },
        value: {},
    },
    components: {
        monacoEditor,
        editorText,
        languageSelect,
        tagRow,
        codeShower,
    },
    computed: {
        Tags() {
            return this.value.tags.map((i) => {
                return typeof i === "string"
                    ? { plain: true, name: i, type: "", closeable: true }
                    : i;
            });
        },
    },
    mounted() {
        console.log(this.value);
    },
    methods: {
        deleteSnippet() {
            Dialog.confirm({
                title: "删除这个 Snippet ",
                message: "请确认",
            })
                .then(() => {
                    return this.DeleteSnippet(this.value._id);
                })
                .then(() => {
                    this.$emit("close");
                });
        },
        saveSnippet(value, key) {
            if (this.editable) {
                this.$emit("input", { ...this.value, [key]: value });
            }
        },
        ...mapActions(["PutSnippet", "RefreshSnippet", "DeleteSnippet"]),
        async uploadSnippet() {
            const result = await this.PutSnippet(this.value);
            console.info("Cloud: ", result);
            this.$emit("input", result);
        },
        async refreshSnippet() {
            if (this.value._id) {
                const resolve = await this.RefreshSnippet(this.value._id);
                console.log(resolve);
                this.$emit("input", resolve[0]);
            }
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.green-btn {
    @apply w-1/5
                    flex
                    justify-center
                    items-center
                    cursor-pointer
                    transition
                    hover:bg-green-400
                    bg-green-500
                    text-white
                    rounded;
}
</style>
